<template>
    <input 
        type="text" 
        placeholder="请输入您的任务名称，回车键确认添加" 
        v-model="todo"
        @keyup.enter = "addTodo"
    >
</template>

<script>
    export default {
        name:"Home-Input",
        data(){
            return {
                todo:""
            }
        },
        methods:{
            addTodo(){
                const todo = {
                    todo:this.todo,
                    done:false
                }
                this.$store.dispatch('Home/addTodo',todo)

                // 延迟100毫秒后更新数据
                setTimeout(()=>{
                    this.$store.dispatch('Home/getTodo')
                },50)

                this.todo = ''
            }
        }
    }
</script>

<style lang="less" scoped>
    input{
        display: inline-block;
        width: 45vw;
        height: 3.4vw;
        border-radius: 0.5vw;
        padding-left: 0.8vw;
        border: 1px solid #ccc;
        outline: none;
        box-shadow: 0 0 10px 10px rgba(204, 204, 204, 0.075);
        font-size: 1.2vw;
        transition: .5s;
        margin-bottom: 2.1vw;
    }

    input:focus{
        font-size: 1.5vw;
    }
</style>